<template>
	<!-- #ifdef MP-WEIXIN -->
	<scroll-view scroll-y style="padding-bottom: 300rpx;background-color: #F6F7F9;">
		<!-- #endif -->
		<view style="height: 100vh; line-height: 100vh; font-weight: 300; font-size: 24upx; text-align: center;"
			v-if="showLoading">数据加载中...</view>
		<view class="my" style="height: 100%;" v-if="!showLoading">
			<view class="worktime-top-section" style="margin-bottom: 60upx;">
				<view class="bg_color"
					style="background: linear-gradient(90deg,rgba(51,143,255,1) 0%,rgba(62,149,255,1) 100%);width: 100%;height: 417rpx;">
					<image :src="IMG_URL + 'static/miniwechat/mytime.png'" mode="aspectFill"></image>
				</view>
				<view v-if="userinfo.id > 0" style="position: relative;z-index: 100;"
					:style="{ paddingTop: StatusBar * 2 + 80 + 'rpx' }">
					<view class="userInfo">
						<view class="tui-msg-box">
							<view @tap="toPage('/pagesauthen/my_editInfo')" class="flex  align-center"
								style="width: 100%;">
								<view class="bg-gray mr10"
									style="width:160upx;height: 160upx; border-radius: 50%;overflow: hidden;flex-shrink: 0;">
									<image :src="user.head_img || '/static/images/logo.png'" class="tui-msg-pic"
										mode="aspectFill"></image>
								</view>
								<view class="tui-msg-item">
									<view class=" text-white text-bold mb5 f40 text_line1">{{ user.user_name || '昵称' }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="up_margin">
					<view class="margin-lr ptb10 bg-white margin-top-sm radius-16">
						<uni-collapse>
							<uni-collapse-item title="小时工">
								<view class=" color-gray radius">
									<view class="padding-xl">
										<view class="flex justify-start align-center margin-bottom-xl"
											style="flex-direction: column;">
											<view class="flex justify-around align-center" style="width: 100%;">
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ hourWorkcount }}
												</view>
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ hourWorksalary }}
												</view>
											</view>
											<view class="flex justify-around align-center margin-top-xs"
												style="width: 100%;">
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentHourStr }}
												</view>
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentSalaryStr }}
												</view>
											</view>
										</view>

										<view class="flex justify-around align-center"
											style="font-weight: 300; border-top: 1px dashed #efefef;  padding-top: 10upx; color: #fff;">
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentSalarySettingRoute + '?type=' + 0, 0)">
												<uni-icons type="gear" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">工资设置</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(worktimerecord + '?type=' + 0, 0)">
												<uni-icons type="compose" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">记工时</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentStatisticsRoute + '?type=' + 0, 0)">
												<uni-icons type="paperplane" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">统计</text>
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
							<uni-collapse-item title="正式工">
								<view class=" color-gray radius">
									<view class="padding-xl">
										<view class="flex justify-start align-center margin-bottom-xl"
											style="flex-direction: column;">
											<view class="flex justify-around align-center" style="width: 100%;">
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ workcount }}
												</view>
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ worksalary }}
												</view>
											</view>
											<view class="flex justify-around align-center margin-top-xs"
												style="width: 100%;">
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentHourStr }}
												</view>
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentSalaryStr }}
												</view>
											</view>
										</view>

										<view class="flex justify-around align-center"
											style="font-weight: 300; border-top: 1px dashed #efefef;  padding-top: 10upx; color: #fff;">
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentSalarySettingRoute + '?type=' + 1, 1)">
												<uni-icons type="gear" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">工资设置</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(worktimerecord + '?type=' + 1, 1)">
												<uni-icons type="compose" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">记工时</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentStatisticsRoute + '?type=' + 1, 1)">
												<uni-icons type="paperplane" size="16" color="#ccc;"></uni-icons>
												<text style="margin-left: 8upx;">统计</text>
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
							<uni-collapse-item title="计件工">
								<!-- <view style="margin-bottom: 20;"> -->
								<view class="color-gray radius">
									<view class="padding-xl">
										<view class="flex justify-start align-center margin-bottom-sm"
											style="flex-direction: column;">
											<view class="flex justify-around align-center" style="width: 100%;">
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ monthWorkcount }}
												</view>
												<view class="f64 bold"
													style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
													{{ monthWorksalary }}
												</view>
											</view>
											<view class="flex justify-around align-center margin-top-xs"
												style="width: 100%;">
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentUnitStr }}<text v-if="countUnit">({{ countUnit }})</text>
												</view>
												<view class="bold" style="flex: 1 1 50%; text-align: center;">
													{{ currentSalaryStr }}
												</view>
											</view>
										</view>

										<view
											style="font-size: 24upx; background-color:#efefef; color: #5f5f5f; font-weight: 300; padding: 20upx 30upx; border-radius: 8upx; margin: 0 0 30upx;">
											提示：如果当前考勤周期有多个计量单位，不区分单位计算总数。</view>

										<view class="flex justify-around align-center"
											style="font-weight: 300; border-top: 1px dashed #efefef;  padding-top: 10upx; color: #fff;">
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentSalarySettingRoute + '?type=' + 2, 2)">
												<uni-icons type="gear" size="16" color="#ffffff;"></uni-icons>
												<text style="margin-left: 8upx;">工资设置</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(worktimerecord + '?type=' + 2, 2)">
												<uni-icons type="compose" size="16" color="#ffffff;"></uni-icons>
												<text style="margin-left: 8upx;">记工时</text>
											</view>
											<view
												style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
												@click="toPage(currentStatisticsRoute + '?type=' + 2, 2)">
												<uni-icons type="paperplane" size="16" color="#ffffff;"></uni-icons>
												<text style="margin-left: 8upx;">统计</text>
											</view>
										</view>
										<!-- </view> -->
										<!-- </view> -->

									</view>

									<!-- </view> -->
								</view>
							</uni-collapse-item>

						</uni-collapse>
					</view>
				</view>

				<!-- <view class="up_margin">
					<view class="margin-lr ptb10 bg-white margin-top-sm radius-16">
						<view class="margin-top-lg flex justify-between worktime-tab">
							<view class="text-center worktime-tab-item"
								:class="currentTab === index ? 'current-tab' : ''" v-for="(item, index) in tabList"
								:key="item.index" @click="currentTab = index">
								<view class="text-333 f32 current-tab-font">{{ item.title }}</view>
							</view>
						</view>
					</view> -->

				<!-- 小时工/正式工当前收入总计 -->
				<!-- 		<view class="path_list margin-top" style="margin-bottom: 60upx;"
						v-if="currentTab === 0 || currentTab === 1">
						<view class=" color-gray radius">
							<view class="padding-xl">
								<view class="flex justify-start align-center margin-bottom-xl"
									style="flex-direction: column;">
									<view class="flex justify-around align-center" style="width: 100%;">
										<view class="f64 bold"
											style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
											{{ workcount }}
										</view>
										<view class="f64 bold"
											style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
											{{ worksalary }}
										</view>
									</view>
									<view class="flex justify-around align-center margin-top-xs" style="width: 100%;">
										<view class="bold" style="flex: 1 1 50%; text-align: center;">
											{{ currentHourStr }}
										</view>
										<view class="bold" style="flex: 1 1 50%; text-align: center;">
											{{ currentSalaryStr }}
										</view>
									</view>
								</view>

								<view class="flex justify-around align-center"
									style="font-weight: 300; border-top: 1px dashed #efefef;  padding-top: 10upx; color: #fff;">
									<view
										style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
										@click="toPage(currentSalarySettingRoute + '?type=' + currentTab)">
										<uni-icons type="gear" size="16" color="#ccc;"></uni-icons>
										<text style="margin-left: 8upx;">工资设置</text>
									</view>
									<view
										style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
										@click="toPage(worktimerecord + '?type=' + currentTab)">
										<uni-icons type="compose" size="16" color="#ccc;"></uni-icons>
										<text style="margin-left: 8upx;">记工时</text>
									</view>
									<view
										style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
										@click="toPage(currentStatisticsRoute + '?type=' + currentTab)">
										<uni-icons type="paperplane" size="16" color="#ccc;"></uni-icons>
										<text style="margin-left: 8upx;">统计</text>
									</view>
								</view>
							</view>
						</view> -->
				<!-- <view
							style="width: 640upx; height: 80upx; background-color: #007AFF; border-radius: 10px; box-shadow: 0 2px 10px 2px rgba(0,0,0,0.4); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;margin: auto;"
							@click="toPage(worktimerecord + '?type=' + currentTab)"
						>
							<i class="text-df cuIcon-add bold" style="color: #FFFFFF; font-size: 48upx;"></i>
							<text style="color: #FFFFFF; font-size: 26upx;">记工时</text>
						</view> -->
				<!-- </view> -->
				<!-- 计件工当前收入总计 -->
				<!-- 			<view v-if="currentTab === 2" style="margin-bottom: 60upx;">
						<view class="path_list margin-top" style="margin-bottom: 0;">
							<view class="color-gray radius">
								<view class="padding-xl">
									<view class="flex justify-start align-center margin-bottom-sm"
										style="flex-direction: column;">
										<view class="flex justify-around align-center" style="width: 100%;">
											<view class="f64 bold"
												style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
												{{ workcount }}
											</view>
											<view class="f64 bold"
												style="flex: 1 1 50%; text-align: center; color: #f3a73f;">
												{{ worksalary }}
											</view>
										</view>
										<view class="flex justify-around align-center margin-top-xs"
											style="width: 100%;">
											<view class="bold" style="flex: 1 1 50%; text-align: center;">
												{{ currentUnitStr }}<text v-if="countUnit">({{ countUnit }})</text>
											</view>
											<view class="bold" style="flex: 1 1 50%; text-align: center;">
												{{ currentSalaryStr }}
											</view>
										</view>
									</view>

									<view
										style="font-size: 24upx; background-color:#efefef; color: #5f5f5f; font-weight: 300; padding: 20upx 30upx; border-radius: 8upx; margin: 0 0 30upx;">
										提示：如果当前考勤周期有多个计量单位，不区分单位计算总数。</view>

									<view class="flex justify-around align-center"
										style="font-weight: 300; border-top: 1px dashed #efefef;  padding-top: 10upx; color: #fff;">
										<view
											style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
											@click="toPage(currentSalarySettingRoute + '?type=' + currentTab)">
											<uni-icons type="gear" size="16" color="#ffffff;"></uni-icons>
											<text style="margin-left: 8upx;">工资设置</text>
										</view>
										<view
											style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
											@click="toPage(worktimerecord + '?type=' + currentTab)">
											<uni-icons type="compose" size="16" color="#ffffff;"></uni-icons>
											<text style="margin-left: 8upx;">记工时</text>
										</view>
										<view
											style="flex:1 1 50%;text-align:center;background-color:#007AFF;padding: 4px 2px 4px 2px;border-radius:20px;"
											@click="toPage(currentStatisticsRoute + '?type=' + currentTab)">
											<uni-icons type="paperplane" size="16" color="#ffffff;"></uni-icons>
											<text style="margin-left: 8upx;">统计</text>
										</view>
									</view>
								</view>
							</view> -->
				<!-- <view
								style="width: 640upx; height: 80upx; background-color: #007AFF; border-radius: 10px; box-shadow: 0 2px 2px 2px rgba(0,0,0,0.2); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto;"
								@click="toPage(worktimerecord + '?type=' + currentTab)"
							>
								<i class="text-df cuIcon-add bold" style="color: #FFFFFF; font-size: 48upx;"></i>
								<text style="color: #FFFFFF; font-size: 26upx;">记工时</text>
							</view> -->
				<!-- 	</view>

					</view>
 -->

			</view>
			<!-- 记工时 <view
					style="width: 128upx; height: 128upx; background-color: #007AFF; border-radius: 50%; box-shadow: 0 2px 10px 2px rgba(0,0,0,0.4); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;"
					@click="toPage(worktimerecord + '?type=' + currentTab)"
				>
					<i class="text-df cuIcon-add bold" style="color: #FFFFFF; font-size: 48upx;"></i>
					<text style="color: #FFFFFF; font-size: 26upx;">记工时</text>
				</view>-->
		</view>


		<!-- 记事本列表 box-shadow: 0 2px 2px 2px rgba(0,0,0,0.2);-->
		<view style="width: 686upx; padding: 30upx; margin: 0 auto; background-color: #FFFFFF;border-radius: 16upx;">
			<view style="border-left: 8upx solid #007AFF;padding-left: 10upx;margin-bottom: 10upx;">记事本
			<view
				style="width: 120upx; height: 40upx; background-color: #f3a73f; border-radius: 10px;  text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;float: inline-end;"
				@click="toPage(recordnotebook)">
				<!-- 记事本列表 <i class="text-df cuIcon-edit bold" style="color: #FFFFFF; font-size: 48upx;"></i>
					--><text style="color: #FFFFFF; font-size: 26upx;">新建</text>
			</view>
			</view>
			<notebooklist ref="record"></notebooklist>
			
		</view>
		</view>

		<view
			style="width: 60%; height: 128upx; display: flex; justify-content: space-around; align-items: center; position: fixed; left: 20%; bottom: 150upx; z-index: 20190118;">


		</view>
		<!-- #ifdef MP-WEIXIN -->
	</scroll-view>
	<!-- #endif -->
</template>
<script>
	export default {
		data() {
			return {
				user: {
					id: 1
				}, //用户信息
				img: this.IMG_URL + 'static/miniwechat/logo.png',
				IMG_URL: this.IMG_URL,
				isopen: true,
				userinfo: uni.getStorageSync('USERINFO'), //缓存的用户信息
				StatusBar: this.StatusBar,
				tabList: [{
						index: 1,
						title: '小时工'
					},
					{
						index: 2,
						title: '正式工'
					},
					{
						index: 3,
						title: '计件工'
					}
				],
				currentTab: -1,
				currentHourStr: '当月工时(小时)',
				currentSalaryStr: '当前收入(元)',
				currentSalarySettingRoute: '/pagesworktime/salarysettings',
				currentStatisticsRoute: '/pagesworktime/worktimestatistics',
				recordnotebook: '/pagesworktime/recordnotebook',
				worktimerecord: '/pagesworktime/worktimerecord',
				currentUnitStr: '当月数量',
				showLoading: true,
				workcount: 0, // 工时或者件数
				worksalary: 0, // 总收入
				hourWorkcount: 0,
				hourWorksalary: 0,
				monthWorkcount: 0,
				monthWorksalary: 0,
				countUnit: '' // 单位
			};
		},
		watch: {
			currentTab(current) {
				// console.error(current);
				this.requestData();
			}
		},
		beforeCreate() {
			// 解析vue生命周期
			// https://blog.csdn.net/hkduan/article/details/115822619
			// https://blog.csdn.net/m0_70477767/article/details/124684195
			// 调用之前，做事件和生命周期函数初始化
		},
		created: function() {
			// 调用之前，做inject/provide初始化以及响应式数据、方法准备

			let tab = uni.getStorageSync('history_page');
			console.error(tab);
			this.currentTab = tab !== '' ? tab : 1; // 默认选中正式工，如果缓存有上次页面使用上次页面
			uni.removeStorageSync('history_page');
			//这是要刷新的数据
			//console.error(this.userinfo);
			if (this.userinfo.user_token) {
				this.get_usrInfo();
			}
		},
		beforeMount() {
			// 调用之前做模板解析
			// console.error('beforeMount');
		},
		mounted() {
			this.requestData(0)
			this.requestData(1)
			this.requestData(2)
			// 渲染后的dom挂在完毕
			// console.error('mounted');
		},
		beforeUpdate(e, v) {
			// 数据更新前
			// console.error('beforeUpdate');
			// 此处不off的话会请求n多次接口，且次数是不断累加的
			uni.$off();
		},
		updated() {
			// 数据更新完毕
			// navigateTo会执行
			console.error('updated');
			uni.$on('change', data => {
				console.log(data);
				if (data.msg == 1) {
					setTimeout(() => {
						this.get_usrInfo();
					});
				}
			});
			uni.$on('wechatLogin', () => {
				//监听微信登录成功
				// console.log('微信登录  个人中心');
				this.get_usrInfo();
			});
			// 在记录工时返回后刷新数据
			uni.$on('update', () => {
				this.requestData();
			});
			// 从统计页面返回，因为在统计页面可能会编辑或者新增记录
			uni.$on('updateOn', () => {
				this.requestData();
			});
			// 更新配置返回
			uni.$on('updateSetting', () => {
				this.requestData();
			});
			// 记事本发布返回
			uni.$on("reback", e => {
				// console.error(this.$refs);
				this.$refs.record.get_list();
			})
		},
		beforeDestroy() {
			// switchTab会执行
			uni.$off();
			// uni.setStorageSync('history_page', this.currentTab);
			console.error('beforeDestroy...');
		},
		destroyed() {
			console.error('destroing...');
		},
		methods: {
			get_usrInfo() {
				//获取用户信息
				this.$Request
					.post(this.$api.user.get_user_info, {
						user_id: this.userinfo.id
					})
					.then(res => {
						this.user = res.data;
					});
			},
			toPage: function(page, currentTab) {
				if (currentTab) this.currentTab = currentTab;
				//console.error(page);
				//防抖
				if (this.isopen == false) {
					return;
				}
				//console.error(page);
				this.isopen = false;
				setTimeout(() => {
					this.isopen = true;
				}, 500);
				//跳转详情，判断是否登录
				if (!this.userinfo.user_token) {
					uni.removeStorageSync('PageCur');
					this.$Common.toast('您还没有登录，请先登录');
					// #ifndef MP-WEIXIN
					uni.navigateTo({
						url: '../../pagessignup/login'
					});
					// #endif

					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../pagessignup/wechat/wxlog?page=outLogin'
					});
					// #endif
				} else {
					uni.navigateTo({
						url: page
					});
				}
			},
			requestData(type) {
				// 请求接口数据
				this.$Request
					.get(this.$api.worktime.get_current_month_info, {
						salaryType: type !== null && type !== undefined ? type : this.currentTab
					})
					.then(res => {
						// console.error(res.data);
						if (type === 0) {
							this.hourWorkcount = Math.round(res.data.hour * 10000) / 10000;
							this.hourWorksalary = Math.round(res.data.salary * 10000) / 10000;
							console.error(type);
						}
						if (type === 1) {
							this.workcount = Math.round(res.data.hour * 10000) / 10000;
							this.worksalary = Math.round(res.data.salary * 10000) / 10000;
						}
						if (type === 2) {
							console.log(21212121)
							this.monthWorkcount = res.data.count;
							this.monthWorksalary = Math.round(res.data.salary * 10000) / 10000;
							this.countUnit = res.data.unit;
						}
						
						setTimeout(() => {
							this.showLoading = false;
						}, 200);
					});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f7f7f7 !important;
		// height: 100%;
		/* #ifdef MP-WEIXIN */
		// height: 100vh;
		/* #endif */
	}

	.my {
		position: relative;
		// height: calc(100%-100upx);
		height: 100%;
		background: #f7f7f7;
		// padding-bottom: 100upx;
	}

	.worktime-top-section {
		width: 100%;

		.bg_color {
			width: 100%;
			height: 417rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}
	}

	.bg_color>image {
		width: 100%;
		height: 100%;
	}

	.up_margin {
		margin: auto;
		// margin-top: -84upx;
		width: 686upx;
		// height: 154upx;
		position: relative;
		background-color: #fff;
		z-index: 3;
		border-radius: 16upx;
	}

	.tui-msg-box {
		width: 686upx;
		margin: 0 auto;

		image {
			width: 160upx;
			height: 160upx;
		}
	}

	.tui-msg-pic {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		// border: 1px solid #fff;
		display: block;
		margin-right: 24upx;
	}

	.path_list {
		padding-top: 0;
		position: relative;
		z-index: 999;
		width: 686upx;
		margin: auto;
		border-radius: 16upx;
		margin-top: 60upx;
		// padding-bottom: 100upx;
		margin-bottom: 140upx;
		background-color: #fff;

		.text-grey {
			font-size: 30rpx;
		}
	}

	.worktime-tab {
		text-align: center;

		.worktime-tab-item {
			width: 100%;
			height: 72upx;
		}

		.current-tab {
			border-bottom: 3px solid #50aeff;
			color: #50aeff;
			padding-bottom: 10upx;

			.current-tab-font {
				font-weight: 700;
			}
		}
	}
</style>
